<template>
  <NavBar />
  <div class="user-profile">
    <el-card class="user-card">
      <h2>个人信息</h2>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
        <el-descriptions-item label="全名">{{ user.fullName ? user.fullName : '未提供' }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ user.gender ? user.gender : '未提供' }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ user.phone ? user.phone : '未提供' }}</el-descriptions-item>
        <el-descriptions-item label="生日">{{ user.birthDate ? formatDate(user.birthDate) : '未提供' }}</el-descriptions-item>
        <el-descriptions-item label="本科学校">{{ user.undergraduateSchool ? user.undergraduateSchool : '未提供' }}</el-descriptions-item>
        <el-descriptions-item label="目标院校">{{ user.targetUniversity ? user.targetUniversity : '未提供' }}</el-descriptions-item>
        <el-descriptions-item label="个人简介">{{ user.personalBio ? user.personalBio : '未提供' }}</el-descriptions-item>
        <el-descriptions-item label="角色">{{ user.role }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
import NavBar from '../components/NavBar.vue'
// 从 Vuex 获取用户数据
const store = useStore()
const user = ref(store.getters.getUser)

// 格式化日期
const formatDate = (dateString: string) => {
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }
  return new Date(dateString).toLocaleDateString('zh-CN', options)
}
</script>

<style scoped>
.user-profile {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.user-card {
  width: 800px;
}

/* 增大表格单元格高度 */
.el-descriptions-item {
  padding: 15px 0; /* 增加上下间距 */
}

.el-descriptions__label,
.el-descriptions__content {
  line-height: 10; /* 增大行间距，提升高度 */
}
</style>